<template>
	<view class="acceptJob">
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
					<view class="item_warp">
						<view class="top">
							<view class="title">
								<text>抖音直播主播</text>
								<text class="salary">5000-10k</text>
							</view>
							<view class="adress">北京小爱智能科技门店</view>
							<view class="tag">
								<u-tag text="五险一金" type="info" bg-color="#F5F7FB" border-color="#F5F7FB" />
								<u-tag text="年终奖" type="info" bg-color="#F5F7FB" border-color="#F5F7FB" />
								<u-tag text="弹性工作" type="info" bg-color="#F5F7FB" border-color="#F5F7FB" />
							</view>
						</view>
						<view class="bottom">
							<text>2020.12.24 10:58 投递</text>
							<text class="status">已查看</text>
						</view>
					</view>
					<view class="item_warp">
						<view class="top">
							<view class="title">
								<text>抖音直播主播</text>
								<text class="salary">5000-10k</text>
							</view>
							<view class="adress">北京小爱智能科技门店</view>
							<view class="tag">
								<u-tag text="五险一金" type="info" bg-color="#F5F7FB" border-color="#F5F7FB" />
								<u-tag text="年终奖" type="info" bg-color="#F5F7FB" border-color="#F5F7FB" />
								<u-tag text="弹性工作" type="info" bg-color="#F5F7FB" border-color="#F5F7FB" />
							</view>
						</view>
						<view class="bottom">
							<text>2020.12.24 10:58 投递</text>
							<text class="status">已查看</text>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待查看'
				}, {
					name: '待面试',
				}, {
					name: '不合格',
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				swiperHeight: 0,
			};
		},
		
		onLoad() {
			
		},
		
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	};
</script>

<style lang="scss" scoped>
	.acceptJob {
		width: 100%;
		height: 100%;
		.item_warp {
			height: 400rpx;
			padding: 40rpx 30rpx 20rpx 30rpx;

			.top {
				padding: 0 0 40rpx 0;
				border-bottom: 2rpx solid #EEEEEE;

				.title {
					margin: 0 0 20rpx 0;

					text {
						font-size: 36rpx;
						line-height: 48rpx;
						color: #333333;
					}

					.salary {
						float: right;
						color: #FF5229;
					}
				}

				.adress {
					margin: 0 0 16rpx 0;
				}

				.tag {
					u-tag {
						margin: 0 16rpx 0 0;
					}
				}
			}

			.bottom {
				padding: 20rpx 0;

				text {
					font-size: 24rpx;
					color: #999999;
					line-height: 40rpx;
				}

				.status {
					color: #FF9836;
				}
			}
		}
	}
</style>
